/* 
*   component-name：递归树组件 
*
*   prop：
*       folder  Array   数据列表
*       select  select  递归固定值，不需要改变
*
*   example：
*       <tree :folder = "trees" :select = "select"></tree>
*
*/
Vue.component('tree', {
    name: "tree",
    data(){
        return {
            currentId:null,    //当前拖动元素id
            targetId:null,    //要拖动到的目标元素id
        }
    },
    template: `
        <ul>
            <li v-for = "(item, index) in folder" :id="item.id"
            :class="{'focus':item.focus}" 
            :draggable="draggable" 
            @dragstart.stop="dragstart($event, item)"
            @dragover.stop.prevent="dragover($event)" 
            @drag.stop.prevent="drag($event)" 
            @drop.stop="drop($event, item)">
                <span @click.stop = "select(item)">id:{{ item.id }}，parentId:{{ item.parentId }}，{{ item.label }}</span>
                <tree v-if = "item.children" 
                :folder = "item.children" 
                :select = "select":draggable="draggable" 
                @dragstart.stop="dragstart($event, item)"
                @dragover.stop.prevent="dragover($event)" 
                @drag.stop.prevent="drag($event)" 
                @drop.stop="drop($event, item)">
                </tree>
            </li>
        </ul>`,
    props: ["folder", "draggable", "select"],
    methods:{
        //回调函数——在元素开始被拖动时
        dragstart(ev, obj) {

            //兼容IE
            var ev = ev || window.event;

            //兼容火狐
            if (navigator.userAgent.indexOf('Firefox') >= 0) {
                ev.dataTransfer = ev.originalEvent.dataTransfer;
                //设置要写入的信息
                ev.dataTransfer.setData('test', "test");
            }

            //用于在拖放操作过程中，修改鼠标指针所指向的图像，未生效……
            //ev.dataTransfer.setDragImage(this.$refs.img1, 0, 0);

            //获取拖放时要写入的信息
            let dt = ev.dataTransfer;

            //设定effectAllowed属性形式为 copy 复制
            dt.effectAllowed = 'copy';


            //保存被拖动元素id
            let cid = null;
            if(ev.target.nodeName == 'LI'){
                cid = ev.target.id?ev.target.id:this.currentId;
            }else if(ev.target.nodeName == 'SPAN'){
                cid = ev.target.parentNode.id?ev.target.parentNode.id:this.currentId;
            }
            this.currentId = cid;
            console.log('被拖动数据id：', cid);

            //console.log(ev.target.parentNode);

            //this.currentObj = obj;
            //this.$set(obj, 'focus', true);
            //parentObj.splice(index, 1);

            ev.dataTransfer.setData('cid', cid);
            ev.dataTransfer.setData('cdata', JSON.stringify(obj));

        },
        //回调函数——在元素被拖动时触发
        drag(ev) {

            //兼容IE
            var ev = ev || window.event;

            //console.log("元素被拖动中，只要不松手此事件一直会触发");

        },
        //回调函数——当被拖动元素在释放区内移动时
        dragover(ev) {

            //兼容IE
            var ev = ev || window.event;

            //获取拖放时要写入的信息
            let dt = ev.dataTransfer;

            //dt.dropEffect = 'copy';   //拷贝被拖拽div，实现拖拽预览位置

            return false;

        },
        //回调函数——当被拖动元素在释放区里放下时
        drop(ev, obj) {

            //兼容IE
            var ev = ev || window.event;

            //从DataTransfer对象那里获取要写入的信息
            let dt = ev.dataTransfer;
            //获取要写入的信息
            //let currentId = dt.getData("currentId");

            //通过设置textContent属性的支，可以输出纯文本形式
            //this.dragTarget.textContent += text;   

            //console.log("拖动完成");


            //这里要判断是拖放到元素的 “上、中、下” 哪个位置，未完待续……
            
            
            //保存要拖动到的目标元素id
            let tid = null;
            if(ev.target.nodeName == 'LI'){
                tid = ev.target.id;
            }else if(ev.target.nodeName == 'SPAN'){
                tid = ev.target.parentNode.id;
            }

            let cdata = JSON.parse(ev.dataTransfer.getData('cdata'));
            cdata.parentId = obj.id;
            if(obj.children){
                obj.children.push(cdata);
            }else{
                this.$set(obj, 'children', [cdata]);
            }

        }
    }
});

